<template>
  <el-dialog :title="title" width="80%" :visible.sync="visible">
    <el-form :inline="true">
      <el-form-item label="商品条码：">
        <el-input placeholder="输入商品条码" v-model="recordInfo.queryForm.barCode" clearable/>
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input placeholder="输入商品名称" v-model="recordInfo.queryForm.goodsName" clearable/>
      </el-form-item>
      <el-form-item label="类别：">
        <el-cascader placeholder="请选择类别" :props="props" v-model="recordInfo.excludeByOrganizationGoodsCategoryId"
                     clearable></el-cascader>
      </el-form-item>
      <el-form-item label="供应商：">
        <el-select v-model="recordInfo.queryForm.goodsOrganizationId" filterable placeholder="请选择" clearable>
          <el-option
            v-for="(item, index) in getSupplierListArr" :key="index"
            :label="item.organizationName"
            :value="item.supplierOrganizationId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchClick">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="determineClick">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table class="table-default" ref="multipleTable" v-loading="recordInfo.loading" :data="recordInfo.list" border
              @selection-change="handleSelectionChange">
      <el-table-column
        type="selection" width="43"
        fixed="left"
      />
      <el-table-column
        label="商品编码"
        prop="goodsId"
      />
      <el-table-column
        label="商品条码"
        prop="barCode"
      />
      <el-table-column
        label="商品名称"
        prop="goodsName"
      />
      <el-table-column
        label="单位"
        prop="unitText"
      />
      <el-table-column
        label="箱规格"
        prop="specifications"
      />
      <el-table-column
        label="品牌"
        prop="brandId"
      />
      <el-table-column
        label="现库存"
        prop="stockQuantity"
      />
      <el-table-column
        label="上周销量"
      />
      <el-table-column
        label="前3个月日均销量"
      />
      <el-table-column
        label="进价"
        prop="chainPurchasePrice"
      />
      <el-table-column
        label="供应商"
        prop="supplierOrganizationName"
      />
    </el-table>
    <el-pagination
      style="margin-top: 10px;"
      background
      :current-page.sync="recordInfo.queryForm.page"
      :page-size.sync="recordInfo.queryForm.pageSize"
      :page-sizes="[5,10,20,30,50,100,200,500]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="recordInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import filters from '@/filters/index'
import permissionMixin from '@/mixins/modules/permission'
import api from "@/api";

export default {
  name: "add",
  components: {},
  filters: {...filters},
  mixins: [permissionMixin],
  computed: {
    ...mapGetters([
      'replenishParseTypeList',
      'purchaseOrderStateList'
    ])
  },
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node.level === 0) {
              var arr = []
              api.getGoodsCategoryList({parentId: 0, page: 1, pageSize: 999}).then(response => {
                response.list.forEach((item, index) => {
                  arr.push(
                    {
                      value: item.goodsCategoryId,
                      label: item.categoryName,
                      leaf: false
                    }
                  )
                })
                resolve(arr)
              })
            }
            if (node.level === 1) {
              // eslint-disable-next-line no-redeclare
              var arr = []
              api.getGoodsCategoryList({parentId: node.value, page: 1, pageSize: 999}).then(response => {
                response.list.forEach((item, index) => {
                  arr.push(
                    {
                      value: item.goodsCategoryId,
                      label: item.categoryName,
                      leaf: false
                    }
                  )
                })
                resolve(arr)
              })
            } else if (node.level === 2) {
              // eslint-disable-next-line no-redeclare
              var arr = []
              api.getGoodsCategoryList({parentId: node.value, page: 1, pageSize: 999}).then(response => {
                response.list.forEach((item, index) => {
                  arr.push(
                    {
                      value: item.goodsCategoryId,
                      label: item.categoryName,
                      leaf: true
                    }
                  )
                })
                resolve(arr)
              })
            }
          }, 100)
        }
      },
      getSupplierListArr: [],
      recordInfo: {
        queryForm: {
          page: 1,
          pageSize: 10,
          returnCount: true,
          orderBy: 'createTimeDesc',
          state: 1
        },
        list: [],
        excludeByOrganizationGoodsCategoryId: null,
        total: 0
      },
      title: '添加商品',
      visible: false,
      handleSelection: []
    }
  },
  methods: {
    getOnlineShoppingMallGoodsListByOrganization() {
      this.$api.getOnlineShoppingMallGoodsListByOrganization(this.recordInfo.queryForm).then(response => {
        this.recordInfo.loading = false
        this.recordInfo.list = response.list
        this.recordInfo.total = parseInt(response.count)
      })
    },
    handleSizeChange(e) {
      this.recordInfo.queryForm.pageSize = e
      this.getOnlineShoppingMallGoodsListByOrganization()
    },
    handleCurrentChange(e) {
      this.recordInfo.queryForm.page = e
      this.getOnlineShoppingMallGoodsListByOrganization()
    },
    getSupplierList() {
      this.$api.getSupplierList(
        {returnCount: true, page: 1, pageSize: 999}
      ).then(response => {
        this.getSupplierListArr = response.list
      })
    },
    childClick(e) {
      console.log(e)
      this.getSupplierList()
      this.getOnlineShoppingMallGoodsListByOrganization()
      this.visible = true
    },
    handleSelectionChange(e) {
      this.handleSelection = e
    },
    determineClick() {
      if (this.handleSelection.length === 0) {
        this.$message({
          message: '请勾选供应商',
          type: 'warning'
        });
        return
      }
      this.visible = false
      this.$parent.fatherMethodShop(this.handleSelection)
      this.$refs.multipleTable.clearSelection();
    },
    searchClick() {
      if (this.recordInfo.excludeByOrganizationGoodsCategoryId !== null) {
        this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId = this.recordInfo.excludeByOrganizationGoodsCategoryId[2]
      } else {
        this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId = undefined
      }
      this.getOnlineShoppingMallGoodsListByOrganization()
    }
  }
}
</script>

<style scoped>

</style>
